<template>
	<view>
		<view class="head">
			<navigator class="rule_box" :url="'/pages/index/time-limited-task/task-ranking/task-rule?id=' + id">任务规则</navigator>
			<view class="active_name ellipseHide">{{info.name}}</view>
			<view class="head_t">
				<text class="head_txt">我的排行</text>
				<text>{{info.rank==0?'暂未上榜':info.rank}}</text>
			</view>
			<view class="head_txt_two">
				<text>打卡金额：￥{{info.punchAmount}}</text>
				<view class="go_invite" @click="goPuchCard">
					<text>前往打卡</text>
					<image class="right_white" src="@/static/blindbox/jackpot/right_white.png" mode=""></image>
				</view>
			</view>
			<view class="head_txt_two">
				<text style="font-size: 26rpx;">活动时间：{{info.startTime}} - {{info.endTime}}</text>
			</view>
		</view>
		<view class="main">
			<view class="main_nav">
				<view class="main_nav_box" v-for="(nav,nIndex) in navList" :key="nIndex" @click="changeNav(nav,nIndex)">
					<text>{{nav.value}}</text>
					<view class="nav_line" v-if="changeIndex==nIndex"></view>
				</view>
			</view>
			<!-- 打卡门店 -->
			<block v-if="changeIndex==0">
				<view class="task_detail" v-for="(item,dIndex) in dataListShop" :key="dIndex">
					<block v-if="item.type==1">
						<view class="card_shop">
							<view class="card_shop_name ellipseHide">{{item.name}}</view>
							<view class="card_shop_distance" v-if="item.distance!=''">距您{{item.distance}}km</view>
						</view>
						<view class="card_shop_address">
							<image src="@/static/index/time-limited-task/address_icon.png" mode=""></image>
							<text>{{item.address}}</text>
						</view>
						<view class="card_shop_b">
							<view class="card_shop_time">{{item.startTime}}~{{item.endTime}}</view>
							<view class="card_shop_puchcard button" @click="punchingClick(item)">去打卡</view>
						</view>
					</block>
					<block v-if="item.type==2">
						<view class="online_punching">
							<image src="@/static/index/time-limited-task/xianshangdk.png" mode=""></image>
							<view class="online_punching_txt ellipseHide">{{item.name}}</view>
							<view class="card_shop_puchcard button" @click="punchingClick(item)">去打卡</view>
						</view>
					</block>
				</view>
				<view class="no_info" v-if="dataListShop.length==0">
					<image src="/static/my/order_no.png" mode="widthFix"></image>
					<text>暂无数据</text>
				</view>
			</block>
			<!-- 奖励列表 -->
			<block v-if="changeIndex==1">
				<view class="main_box" v-for="(item,index) in list" :key="index">
					<view class="main_box_l">
						<image class="rank_img" v-if="index==0" src="@/static/blindbox/jackpot/first.png" mode=""></image>
						<image class="rank_img" v-else-if="index==1" src="@/static/blindbox/jackpot/second.png" mode="">
						</image>
						<image class="rank_img" v-else-if="index==2" src="@/static/blindbox/jackpot/third.png" mode="">
						</image>
						<text class="rank_num" v-else>{{index+1}}</text>
						<image class="avatar" :src="item.customerAvatar==''?'../../../../static/blindbox/avant_null.png':item.customerAvatar" mode="aspectFill"></image>
						<text class="phone" v-if="awardLogicType!=3">{{item.customerPhone}}</text>
						<view class="" v-if="awardLogicType==3">
							<view class="phone">{{item.customerPhone}}</view>
							<view class="phone" style="font-size: 28rpx;margin-top: 6rpx;">打卡时间：{{item.createTime}}</view>
						</view>
					</view>
					<view class="main_box_r"  v-if="awardLogicType!=3">
						打卡金额：{{item.totalPayMoney}}
					</view>
				</view>
				<view class="no_info" v-if="list.length==0">
					<image src="/static/my/order_no.png" mode="widthFix"></image>
					<text>暂无数据</text>
				</view>
			</block>
			<!-- 任务明细 -->
			<block v-if="changeIndex==2">
				<view class="task_detail" v-for="(item,dIndex) in dataList" :key="dIndex">
					<view class="task_detail_head">
						<view class="task_detail_head_l">消费打卡</view>
						<view class="task_detail_head_r">
							<text>￥</text>
							<text style="font-weight: bold;font-size: 36rpx;">{{item.payMoney}}</text>
						</view>
					</view>
					<view class="task_detail_center">{{item.name}}</view>
					<view class="task_detail_time">
						{{item.createTime}}
					</view>
				</view>
				<view class="no_info" v-if="dataList.length==0">
					<image src="/static/my/order_no.png" mode="widthFix"></image>
					<text>暂无数据</text>
				</view>
			</block>
		</view>
		<!-- 点击店铺弹窗 -->
		<view class="prop_box" @touchmove.stop.prevent v-if="isShow">
			<view class="prop_box_content" :class="isShow?'prop_box_content_active':''">
				<view class="prop_box_content_h">
					<view class="prop_box_content_h_address" v-if="shopDetail.distance!=''">
						距您{{shopDetail.distance}}km
					</view>
					<view class="prop_box_shop_name ellipseHide"
						:class="shopDetail.distance==''?'prop_box_shop_name2':'prop_box_shop_name'">
						{{shopDetail.name}}
					</view>
					<!-- <view class="prop_box_shop_name2 ellipseHide" v-if="shopDetail.lat==''">{{shopDetail.name}}</view> -->
					<view class="prop_box_close" @click.stop="isShow=false">
						<image src="@/static/sy/close_icon.png" mode=""></image>
					</view>
				</view>
				<view class="prop_box_content_location" v-if="shopDetail.lat!=''">
					<image class="address_icon" src="@/static/sy/address_icon.png" mode=""></image>
					<view class="prop_box_content_location_r">
						<view class="location_detail">{{shopDetail.address}}</view>
						<view class="prop_time">{{shopDetail.startTime}} ~ {{shopDetail.endTime}}</view>
					</view>
				</view>
				<view class="available_items">可用商品({{listTotalShop}})</view>
				<view class="prop_list">
					<scroll-view class="scroll_view" scroll-y="true" @scrolltolower="scrolltolower">
						<view class="prop_list_box" v-for="(item,pIndex) in commodityList" :key="pIndex">
							<image class="prop_list_box_l" :src="item.activityImg" mode="aspectFill"></image>
							<view class="prop_list_box_r">
								<view class="prop_list_box_r_title ellipseHide_two">
									{{item.name}}
								</view>
								<view class="reward" v-if="item.awardType!=3">
									预计获得{{item.awardAmount}}<text v-if="item.awardType==2">通分</text><text
										v-if="item.awardType==1">神椰CoCo</text>奖励
								</view>
								<view class="prop_list_box_r_detail">
									<view class="prop_list_box_r_detail_price">
										<text style="font-size: 30rpx;font-weight: 400;">￥</text>
										<text>{{item.sellPrice}}</text>
										<text style="font-size: 24rpx;font-weight: 400;margin-left: 4rpx;"
											v-if="item.isMultiProduct">起</text>
									</view>
									<view class="prop_list_box_r_detail_button" @click="buyClick(item)">立即购买</view>
								</view>
							</view>
						</view>
						<view style="height: 200rpx;"></view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getH5LimitTaskInfo,
		taskH5RankList,
		taskH5RecordRankList,
		taskPunchList,
		punchShopList,
		activityShopDetail,
		activityShopActivityList
	} from '@/api/timeLimitedTask.js'
	import jweixin from '@/components/jweixin-module/jsdk'
	import wechat from '@/components/jweixin-module/wechat'
	export default {
		data() {
			return {
				navList:[
					{id:0,value:'打卡门店'},{id:1,value:'任务排行'},{id:2,value:'打卡明细'}
				],
				changeIndex: 0,
				token:'',
				id: '', //神椰限时任务id
				list: [],
				info:{},
				pageNumber: 1,//当前页数
				pageSize: 10,//分页大小
				listTotal: 0,//列表总数
				dataList:[],//打卡明细列表
				dataListShop:[],//打卡门店列表
				shopDetail: {}, //店铺详情
				listTotalShop: 0, //总数(商品列表用)
				pageSizeShop: 5, //每页记录数(商品列表用)
				pageNumShop: 1, //当前页码(商品列表用)
				commodityList: [], //商品列表
				isShow: false,//弹窗
				isPT: true, //是否是平台
				latitude: '', //纬度
				longitude: '', //经度
				address: '', //地址
				shopId:'',
				awardLogicType:'',//奖励逻辑类型 1累积奖池 2固定奖池 3快速消费奖励'
			}
		},
		onLoad(option) {
			wechat.scanQRJssdk()
			this.token = uni.getStorageSync('token')
			this.id = option.id
			this.awardLogicType = option.awardLogicType
			if(option.awardLogicType==3){ //快速消费
				this.navList[1].value = '奖励列表'
				this.getRecordList()
			}else{
				this.navList[1].value = '任务排行'
				this.getList()
			}
			setTimeout(() => {
				this.getLocation()
			}, 200)
			this.getLimitTaskInfo()
		},
		onHide() {
			uni.removeStorageSync('person-card');
		},
		methods: {
			goPuchCard(){ //前往打卡
				window.location.href = '/pages/sy/sy'
			},
			changeNav(item,index){ //nav类型切换
				this.changeIndex = index
				this.pageNumber = 1
				if(index==0){ //打卡门店
					this.getLocation() //获取定位
				}else if(index==1){
					if(this.awardLogicType==3){ //快速消费
						this.navList[1].value = '奖励列表'
						this.getRecordList()
					}else{
						this.navList[1].value = '任务排行'
						this.getList()
					}
				}else{  //打卡明细A
					this.getTaskPunchList()
				}
			},
			punchingClick(item){ //去打卡（弹窗）
				this.shopId = item.id
				this.getShopDetail()
			},
			async getShopDetail() { //查询店铺详情
				uni.showLoading({
					title: '加载中'
				})
				// this.shopId = '1594895221209604098'
				let data = {
					lat: this.latitude,
					lnt: this.longitude,
					id: this.shopId,
				}
				try {
					const res = await activityShopDetail(data)
					this.shopDetail = res.result
					if (res.result.lat != '') {
						this.isPT = true
					} else {
						this.isPT = false
					}
					this.pageNumShop = 1
					this.getCommodityList()
					this.isShow = true
					uni.hideLoading()
					
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
			},
			async getCommodityList() { //获取打卡活动列表
				console.log(this.pageNumShop)
				var _this = this
				// console.log(this.navList[this.headerIndex].status)
				let data = {
					pageSize: this.pageSizeShop,
					pageNum: this.pageNumShop,
					shopId: this.shopId
				}
				const res = await activityShopActivityList(data);
				this.listTotalShop = res.result.total
				if (this.pageNumShop > 1) {
					this.commodityList = this.commodityList.concat(res.result.records); //将数据拼接在一起
				} else {
					this.commodityList = res.result.records
				}
			},
			scrolltolower() { //打卡活动列表分页
				if (this.pageNumShop >= Math.ceil(this.listTotalShop / this.pageSizeShop)) {
					console.log('没有分页')
				} else {
					this.pageNumShop++; //每触底一次 page + 1;
					this.getCommodityList()
				}
			},
			buyClick(item) { //跳转商品详情
				let data = {
					lat: this.latitude, //纬度
					lnt: this.longitude, //	经度
					id: item.id, //活动id
					shopId: this.shopId, //店铺id
				}
				let info = JSON.stringify(data)
				if (this.isPT) { //跳转平台
					let platform = uni.getSystemInfoSync().platform
					if (platform == 'ios') {
						window.location.href = "/pages/pay/mine-details-one?info=" + info
					} else if (platform == 'android') {
						uni.navigateTo({
							url: '/pages/pay/mine-details-one?info=' + info
						})
					}
					// window.location.href = "/pages/pay/mine-details-one?info=" + info
				} else { //跳转第三方
					let platform = uni.getSystemInfoSync().platform
					if (platform == 'ios') {
						window.location.href = '/pages/pay/mine-details-two?id=' + item.id + '&shopId=' + this.shopId
					} else if (platform == 'android') {
						uni.navigateTo({
							url: '/pages/pay/mine-details-two?id=' + item.id + '&shopId=' + this.shopId
						})
					}
					// window.location.href = '/pages/pay/mine-details-two?id=' + item.id
				}
			},
			async getLimitTaskInfo() { //获取我的排名信息
				uni.showLoading()
				const res = await getH5LimitTaskInfo(this.id);
				uni.hideLoading()
				this.info = res.result;
			},
			async getList() { //任务排行列表
				uni.showLoading()
				let data = {
					limitTaskId: this.id
				}
				const res = await taskH5RankList(data);
				uni.hideLoading()
				this.list = res.result;
			},
			async getRecordList() { //奖励列表
				uni.showLoading()
				let data = {
					limitTaskId: this.id
				}
				const res = await taskH5RecordRankList(data);
				uni.hideLoading()
				this.list = res.result;
			},
			async getTaskPunchList() { //打卡明细
				uni.showLoading()
				var _this = this
				// console.log(this.navList[this.headerIndex].status)
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNumber,
					limitTaskId: this.id
				}
				try {
					const res = await taskPunchList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					if (this.pageNumber > 1) {
						this.dataList = this.dataList.concat(res.result.records); //将数据拼接在一起
					} else {
						this.dataList = res.result.records
					}
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
			},
			async getPunchShopList() { //打卡门店
				// uni.showLoading()
				var _this = this
				// console.log(this.navList[this.headerIndex].status)
				let data = {
					limitTaskId: this.id,
					lat: this.latitude,
					lnt: this.longitude,
				}
				try {
					const res = await punchShopList(data);
					uni.hideLoading()
					this.dataListShop = res.result
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
			},
			getLocation() {
				console.log(545)
				let that = this
				uni.showLoading({
					title: '获取定位中',
					mask: true
				})
				jweixin.getLocation({
					// uni.getLocation({
					type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
					success: function(res) {
						console.log('res+++++', res);
						that.latitude = res.latitude
						that.longitude = res.longitude
						uni.hideLoading()
						that.getPunchShopList()
					},
					cancel: function() {
						console.log('cancel++++++++++')
						// uni.showModal({
						// 	content:'cancel++++++++++' + that.address
						// })
						that.getPunchShopList()
						uni.hideLoading()
					},
					fail: function(res) {
						console.log('fail+++++++++')
						uni.hideLoading()
						uni.showToast({
							title: '定位失败，请重新定位',
							icon: 'none'
						})
						that.getPunchShopList()
					},
				});
				setTimeout(res => {
					uni.hideLoading()
				}, 4000)
			},　
		},
		//页面上拉触底事件的处理函数
		onReachBottom: function() {
			console.log("触底了", this.pageNumber, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNumber >= Math.ceil(this.listTotal / this.pageSize)) {
				console.log('没有分页')
				// this.lodingtype = 1
			} else {
				if(this.changeIndex==2){
					this.pageNumber++; //每触底一次 page + 1;
					this.getTaskPunchList()
				}
			}
		},
		
	}
</script>

<style>
	view {
		box-sizing: border-box;
	}

	.head {
		width: 100%;
		height: 402rpx;
		background: linear-gradient(180deg, #069AFC 0%, #55D2CD 93.62%);
		padding: 40rpx 50rpx 110rpx;
	}
	.rule_box{
		width: 114rpx;
		height: 48rpx;
		border-radius: 40rpx 0rpx 0rpx 40rpx;
		background: rgba(0, 34, 99, .5);
		text-align: center;
		line-height: 48rpx;
		color: #FFFFFF;
		font-size: 22rpx;
		position: absolute;
		right: 0;
		top: 40rpx;
	}
	.active_name{
		font-size: 34rpx;
		color: #FFFFFF;
		width: 490rpx;
		margin-bottom: 24rpx;
	}
	.head_t {
		color: #fff;
		font-size: 44rpx;
		margin-bottom: 12rpx;
		/* font-weight: bold; */
	}

	.head_txt {
		font-size: 30rpx;
		color: #FFFFFF;
		margin-right: 22rpx;
	}
	.head_txt_two{
		font-size: 30rpx;
		color: #FFFFFF;
		margin-right: 22rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.go_invite{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #FFFFFF;
		width: 148rpx;
		height: 44rpx;
		border-radius: 100rpx;
		border: 2rpx solid #fff;
		margin-left: 22rpx;
	}
	.right_white{
		width: 11rpx;
		height: 14rpx;
		margin-left: 6rpx;
	}

	.main {
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: -80rpx;
		padding-bottom: 100rpx;
	}
	.main_nav{
		display: flex;
		padding: 40rpx 0 34rpx;
	}
	.main_nav_box{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		color: #222222;
		position: relative;
		height: 68rpx;
		width: calc(100% / 3);
		font-weight: bold;
	}
	.nav_line{
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		border-radius: 20rpx;
		width: 60rpx;
		height: 6rpx;
		position: absolute;
		bottom: 0;
	}
	.main_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 26rpx 0rpx;
		margin: 0 40rpx;
		border-bottom: 2rpx solid #E1E1E1;
	}
	.main_box:last-child{
		border-bottom: 0;
	}

	.rank_img {
		width: 39rpx;
		height: 46rpx;
	}

	.main_box_l {
		display: flex;
		align-items: center;
	}

	.rank_num {
		font-size: 30rpx;
		color: #222222;
		/* font-weight: 600; */
		width: 39rpx;
		height: 46rpx;
		text-align: center;
		line-height: 46rpx;
	}

	.phone {
		font-size: 32rpx;
		color: #222222;
		/* font-weight: 600; */
	}

	.avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		margin: 0 24rpx;
	}

	.main_box_r {
		font-size: 30rpx;
		color: #222222;
	}
	.task_detail{
		padding: 30rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx #EAEAEA;
		margin: 26rpx 30rpx 4rpx;
	}
	.task_detail:first-child{
		margin: 40rpx 30rpx 30rpx;
	}
	.task_detail_head{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.task_detail_head_l{
		font-size: 32rpx;
		color: #222222;
		font-weight: bold;
	}
	.task_detail_head_r{
		color: #FF3A3A;
		font-size: 28rpx;
	}
	.task_detail_center{
		font-size: 28rpx;
		color: #222222;
		margin: 20rpx 0 6rpx;
	}
	.task_detail_time{
		font-size: 26rpx;
		color: #999999;
	}
	.card_shop{
		display: flex;
		align-items: center;
	}
	.card_shop_name{
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
		max-width: 440rpx;
		margin-right: 16rpx;
	}
	.card_shop_distance{
		border: 2rpx solid #6F00FC;
		border-radius: 4rpx;
		height: 36rpx;
		color: #6F00FC;
		font-size: 22rpx;
		line-height: 32rpx;
		padding: 0 10rpx;
	}
	.card_shop_address{
		font-size: 24rpx;
		color: #555555;
		display: flex;
		align-items: center;
		margin: 20rpx 0;
	}
	.card_shop_address image{
		width: 28rpx;
		height: 28rpx;
		margin-right: 4rpx;
	}
	.card_shop_b{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.card_shop_time{
		font-size: 24rpx;
		color: #333333;
		border: 2rpx solid #CDCDCD;
		border-radius: 4rpx;
		text-align: center;
		width: 164rpx;
		height: 46rpx;
		line-height: 42rpx;
	}
	.card_shop_puchcard{
		width: 120rpx;
		height: 48rpx;
		background: linear-gradient(90deg, #2720DE 0%, #6F00FC 98.24%);
		border-radius: 100rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		line-height: 48rpx;
		text-align: center;
	}
	.online_punching{
		display: flex;
		align-items: center;
	}
	.online_punching image{
		width: 126rpx;
		height: 38rpx;
		margin-right: 18rpx;
	}
	.online_punching_txt{
		width: 380rpx;
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
	}
	/* 弹窗 */
	.prop_box {
		background-color: rgba(0, 0, 0, 0.6);
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 9;
		top: 0;
	}
	
	.prop_box_content {
		background-color: #FFFFFF;
		width: 100%;
		min-height: 844rpx;
		/* max-height: 1060rpx; */
		border-radius: 32rpx 32rpx 0 0;
		position: fixed;
		bottom: 0;
		z-index: 10;
	}
	
	.prop_box_content_active {
		animation: domainactive 0.5s forwards ease-in-out;
	}
	
	@keyframes domainactive {
		0% {
			bottom: -999rpx;
		}
	
		100% {
			bottom: 0;
		}
	}
	
	.prop_box_content_h {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 44rpx 34rpx 40rpx;
		border-bottom: 2rpx solid #D9D9D9;
		margin: 0 20rpx;
	}
	
	.prop_box_content_h_address {
		height: 40rpx;
		padding: 0 10rpx;
		text-align: center;
		line-height: 36rpx;
		border: 2rpx solid #2720DE;
		font-size: 24rpx;
		color: #2720DE;
		border-radius: 4rpx;
	}
	
	.prop_box_shop_name {
		width: 390rpx;
		font-size: 34rpx;
		color: #444444;
		margin: 0 10rpx 0 14rpx;
		text-align: center;
		font-weight: bold;
	}
	
	.prop_box_shop_name2 {
		width: 950rpx;
		font-size: 32rpx;
		color: #444444;
		margin: 0 10rpx 0 14rpx;
		text-align: center;
	}
	
	.prop_box_close {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.prop_box_close image {
		width: 26rpx;
		height: 26rpx;
	}
	
	.prop_box_content_location {
		display: flex;
		padding: 30rpx 32rpx 20rpx;
	}
	
	.prop_box_content_location_r {
		flex: 1;
	}
	
	.address_icon {
		width: 34rpx;
		height: 34rpx;
		margin-right: 6rpx;
		margin-top: 4rpx;
	}
	
	.location_detail {
		font-size: 30rpx;
		color: #333333;
		margin-bottom: 18rpx;
	}
	
	.prop_time {
		width: 216rpx;
		height: 50rpx;
		border: 2rpx solid #CDCDCD;
		text-align: center;
		line-height: 46rpx;
		color: #333333;
		font-size: 30rpx;
		border-radius: 4rpx;
	}
	
	.available_items {
		font-size: 30rpx;
		color: #222222;
		margin: 40rpx 0 30rpx 32rpx;
	}
	
	.prop_list {
		height: 700rpx;
		padding: 0 32rpx 4rpx;
		border-radius: 20rpx;
	}
	
	.prop_list_box {
		background: #FFFFFF;
		/* box-shadow: 0 0 20rpx #E4E4E4; */
		border: 2rpx solid #E6E6E6;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
	}
	.scroll_view {
		height: 100%;
	}
	
	.prop_list_box_l {
		width: 184rpx;
		height: 190rpx;
		margin-right: 28rpx;
		border-radius: 8rpx;
	}
	
	.prop_list_box_r {
		flex: 1;
		height: 190rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.prop_list_box_r_title {
		font-size: 30rpx;
		color: #222222;
		font-weight: bold;
	}
	
	.reward {
		border: 2rpx solid #FF4820;
		border-radius: 4rpx;
		font-size: 22rpx;
		color: #FF4820;
		height: 36rpx;
		text-align: center;
		line-height: 30rpx;
		/* margin: 10rpx 0 16rpx; */
		width: fit-content;
		padding: 0 10rpx;
	}
	
	.prop_list_box_r_detail {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.prop_list_box_r_detail_price {
		font-size: 44rpx;
		font-weight: bold;
		color: #FF3A3A;
	}
	
	.prop_list_box_r_detail_button {
		width: 124rpx;
		height: 44rpx;
		background: linear-gradient(92.26deg, #FF7461 6.48%, #FF4219 98.53%);
		border-radius: 100rpx;
		color: #FFFFFF;
		font-size: 22rpx;
		text-align: center;
		line-height: 44rpx;
	}
	
	.prop_list_box_r_detail_button:active {
		opacity: 0.8;
	}
	.no_info{
		padding-top: 200rpx;
	}
</style>
